<script setup lang="ts">
import { ref } from "vue";
import administrators from "./components/administrators.vue";
import Dialog from "@/components/base-ui/dialog";
import Drawer from "@/components/base-ui/drawer";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { ReNormalCountTo } from "@/components/ReCountTo";
import orderList from "./components/orderList.vue";
import Pie from "./components/Pie.vue";
import Bar from "./components/Bar.vue";
import BarOne from "./components/BarOne.vue";
import Line from "./components/Line.vue";
import { formConfig } from "./components/config/form.config";
import { gettjinfo } from "@/api/home"
import { useNav } from "@/layout/hooks/useNav";

const {
  username,
} = useNav();


const {
  DialogRef,
  DialogSubmit,
  onDialogClose,
  DrawerRef,
  openDrawer,
  onDrawerClose,
  DrawerType,
  IformConfig
} = usepageTable({
  formConfig,
})


defineOptions({
  name: "Welcome"
});

const loading = ref<boolean>(true);
setTimeout(() => {
  loading.value = !loading.value;
}, 800);



const count = ref(0)
const load = () => {
  count.value += 2
}


// 数据统计
const tjinfo = ref(null)
const pieList = ref([])
const gettjinfoData = () => {
  gettjinfo().then(res => {
    console.log(res)
    tjinfo.value = res.result
    pieList.value = [
      { value: res.result.dfh, name: "待发货订单" },
      { value: res.result.dsh, name: "待收货订单" },
      { value: res.result.th, name: "退货订单" },
      { value: res.result.ywc, name: "已完成订单" }
    ]

  })
}

gettjinfoData()

const administratorsRef = ref(null)
const fatherDrawerSubmit = (e) => {
  administratorsRef.value.DrawerSubmit(e)
  DrawerRef.value.close()
}
</script>

<template>
  <div>
    <el-row style="margin: 20px">
      <el-col style="padding: 0 8px;" class="relative" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <div class="absolute top-0 bottom-0 left-0 right-0 flex pl-[32px] flex-col justify-center">
          <div class="mb-[8px]">
            <span style="color: #0088FF;font-weight: 600;font-size: 28px;">{{ username }}</span>
            <span style="font-size: 28px;">，欢迎您！祝您开心每一天</span>
          </div>
          <div>
            <img class="h-[16px] w-[240px]" src="../../assets/home/home4.png" alt="">
          </div>
        </div>
        <img class="h-[124px] w-full" src="../../assets/home/bg@2x.png" alt="">
      </el-col>
    </el-row>


    <el-row :gutter="16" style="margin: 20px">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="margin-bottom: 20px" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 226px" :body-style="{ padding: '0px ' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>

              <div class="flex" style="background: #F7F7F7;">
                <div class="flex-1 p-[24px]">
                  <div class="text-[24px] font-[600] mb-[40px]">产品中心</div>
                  <div class="flex justify-between">
                    <div>
                      <div style="color: #6B7988;font-size: 14px;margin-bottom: 10px;">
                        产品总数
                      </div>
                      <ReNormalCountTo :duration="1000" :color="'#0A2B4A'" :fontSize="'32px'" :startVal="1"
                        :endVal="tjinfo.cpzs" />
                    </div>
                    <div>
                      <div style="color: #6B7988;font-size: 14px;margin-bottom: 10px;">
                        产品类别总数
                      </div>
                      <ReNormalCountTo :duration="1000" :color="'#0A2B4A'" :fontSize="'32px'" :startVal="1"
                        :endVal="tjinfo.cplbzs" />
                    </div>
                  </div>




                </div>




                <div class="w-[226px] h-[226px]">
                  <img class="w-full h-full" src="../../assets/home/hone1.png" alt="">
                </div>

              </div>

            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="margin-bottom: 20px" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 226px" :body-style="{ padding: '0px ' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>

              <div class="flex" style="background: #F7F7F7;">
                <div class="flex-1 p-[24px]">
                  <div class="text-[24px] font-[600] mb-[40px]">应用领域</div>
                  <div class="flex justify-between">
                    <div>
                      <div style="color: #6B7988;font-size: 14px;margin-bottom: 10px;">
                        应用总数
                      </div>
                      <ReNormalCountTo :duration="1000" :color="'#0A2B4A'" :fontSize="'32px'" :startVal="1"
                        :endVal="tjinfo.yyzs" />
                    </div>
                    <div>
                      <div style="color: #6B7988;font-size: 14px;margin-bottom: 10px;">
                        应用类别总数
                      </div>
                      <ReNormalCountTo :duration="1000" :color="'#0A2B4A'" :fontSize="'32px'" :startVal="1"
                        :endVal="tjinfo.yylbzs" />
                    </div>
                  </div>
                </div>
                <div class="w-[226px] h-[226px]">
                  <img class="w-full h-full" src="../../assets/home/home2.png" alt="">
                </div>

              </div>

            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="margin-bottom: 20px" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 226px" :body-style="{ padding: '0px ' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>

              <div class="flex" style="background: #F7F7F7;">
                <div class="flex-1 p-[24px]">
                  <div class="text-[24px] font-[600] mb-[40px]">评估板</div>
                  <div class="flex ">
                    <div>
                      <div style="color: #6B7988;font-size: 14px;margin-bottom: 10px;">
                        评估板总数
                      </div>
                      <ReNormalCountTo :duration="1000" :color="'#0A2B4A'" :fontSize="'32px'" :startVal="1"
                        :endVal="tjinfo.pgbsl" />
                    </div>

                  </div>
                </div>
                <div class="w-[226px] h-[226px]">
                  <img class="w-full h-full" src="../../assets/home/home3.png" alt="">
                </div>

              </div>

            </template>
          </el-skeleton>
        </el-card>
      </el-col>




      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14" style="margin-bottom: 20px" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 360px" :body-style="{ height: '360px', padding: '4px' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <div class="overflow-y-auto" v-infinite-scroll="load">
                <orderList></orderList>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>



      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" style="margin-bottom: 20px" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 360px" :body-style="{ height: '270px' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <!-- <Bar /> -->
              <div class="min-w-[547px]">
                <Pie :list='pieList'></Pie>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>



      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-motion :initial="{
        opacity: 0,
        y: 100
      }" :enter="{
  opacity: 1,
  y: 0,
  transition: {
    delay: 400
  }
}">
        <el-card style="height: 360px" :body-style="{ height: '270px' }">
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <administrators ref="administratorsRef" @compile="(row) => openDrawer('redact', row)"></administrators>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>


    </el-row>


    <Dialog ref="DialogRef" @submit="DialogSubmit" @onclose="onDialogClose" title="编辑"></Dialog>
    <Drawer ref="DrawerRef" :title="DrawerType" @submit="fatherDrawerSubmit" @onClose="onDrawerClose"
      :formConfig="IformConfig">
    </Drawer>

  </div>
</template>
<style scoped>
:deep(.el-card__header) {
  border: none;
}
</style>
